<template>
  <el-card class="form-container" shadow="never">
    <el-form
      :model="listQuery"
      :rules="rules"
      ref="videoFrom"
      label-width="150px"
      size="small">
      <el-form-item label="标题：" prop="videoName" >
        <el-input v-model="listQuery.videoName" class="input-width" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="时长：" prop="videoLength" >
        <el-input v-model="listQuery.videoLength" class="input-width" placeholder="请输入时长"></el-input>
      </el-form-item>
      <el-form-item label="标清：" prop="videoAddrLow" >
        <el-input v-model="listQuery.videoAddrLow" class="input-width" placeholder="请输入视频url"></el-input>
      </el-form-item>
      <el-form-item label="高清：" prop="videoAddrHigh" >
        <el-input v-model="listQuery.videoAddrHigh" class="input-width" placeholder="请输入视频url"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('videoFrom')">新增</el-button>
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import { VideoControllerSave } from '@/api/college'

const defaultVideo = {
  'courseId': 0,
  'createTime': '',
  'status': '',
  'updateTime': '',
  'videoLength': '',
  'videoName': '',
  'videoTitle': '',
  'videoUrl': '',
  'videoAddrLow': '',
  'videoAddrHigh': ''
}
export default {
  name: 'VideoDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      listQuery: Object.assign({}, defaultVideo),
      video: {},
      loading: false,
      rules: {
        videoName: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        videoLength: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        videoAddrLow: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        videoAddrHigh: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.listQuery.courseId = this.$route.query.id
    // console.log(this.listQuery)
  },
  methods: {
    onSubmit (videoFrom) {
      this.$refs['videoFrom'].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // console.log(this.listQuery)
            const { videoAddrLow, videoAddrHigh } = this.listQuery
            const params = {
              ...this.listQuery,
              videoUrl: JSON.stringify([
                videoAddrLow,
                videoAddrHigh
              ])
            }
            console.log(params)
            VideoControllerSave(params).then(response => {
              this.$message({
                message: '提交成功',
                type: 'success',
                duration: 1000
              })
              this.$router.back()
            })
          })
        } else {
          this.$message({
            message: '提交失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    resetForm (videoFrom) {
      this.$refs[videoFrom].resetFields()
      this.video = Object.assign({}, defaultVideo)
    },
    back () {
      this.$router.go(-1)
    }
  }

}
</script>
<style scoped>
  .input-width {
    width: 70%;
  }
</style>
